<template>
	<div>
		<div ref='wrapper' class="wrapper">
			<div>
				<li v-for="i in 100">
					{{i}}
				</li>
			</div>
		</div>
		消息
	</div>
</template>

<script lang="ts">
	import {defineComponent,onMounted,ref} from 'vue'  
	
	import BetterScroll from '@better-scroll/core'
  import PullDown from '@better-scroll/pull-down'
	BetterScroll.use(PullDown)
	//pc端兼容
	import MouseWheel from '@better-scroll/mouse-wheel'
  BetterScroll.use(MouseWheel)
	export default defineComponent({
		setup(){
			var wrapper=ref()
			onMounted(()=>{
				let bs = new BetterScroll(wrapper.value, {
					pullDownRefresh: true,
					mouseWheel: {
					  speed: 20,
					  invert: false,
					  easeTime: 100,
					}
				})
				bs.on('pullingDown', () => {
							setTimeout(()=>{
								console.log('loading...')
								bs.finishPullDown()
							},3000)
				})
			})
			return {
				wrapper
			}
		}
	})
</script>

<style>
	.wrapper{
		width: 500px;
		height: 300px;
		background-color: red;
	}
</style>
